{% extends "base.html" %}
{% block title %}银行卡管理{% endblock %}

{% block content %}
<!-- 页面标题和添加按钮 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-credit-card-fill"></i> 银行卡管理</h2>
    <a href="{{ url_for('admin_add_card') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> 添加银行卡
    </a>
</div>

<!-- 高级查询表单 -->
<div class="card mb-4">
    <div class="card-header">银行卡高级查询</div>
    <div class="card-body">
        <form method="GET" action="{{ url_for('admin_cards') }}" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">查询类型</label>
                <select name="search_type" class="form-select">
                    <option value="">-- 选择查询类型 --</option>
                    <option value="exact" {% if search_type=='exact' %}selected{% endif %}>精确查询</option>
                    <option value="fuzzy" {% if search_type=='fuzzy' %}selected{% endif %}>模糊查询</option>
                    <option value="range" {% if search_type=='range' %}selected{% endif %}>范围查询</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">查询字段</label>
                <select name="search_field" class="form-select">
                    <option value="">-- 选择字段 --</option>
                    <option value="card_number" {% if search_field=='card_number' %}selected{% endif %}>卡号</option>
                    <option value="customer_id" {% if search_field=='customer_id' %}selected{% endif %}>客户ID</option>
                    <option value="balance" {% if search_field=='balance' %}selected{% endif %}>余额</option>
                </select>
            </div>

            <div class="col-md-3" id="searchValueContainer">
                <label class="form-label">查询值</label>
                <input type="text" name="search_value" class="form-control"
                       value="{{ search_value }}" placeholder="输入查询值">
            </div>

            <div class="col-md-3 d-none" id="rangeContainer">
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label">最小值</label>
                        <input type="number" name="min_value" class="form-control"
                               value="{{ min_value }}" placeholder="最小值" step="0.01">
                    </div>
                    <div class="col-6">
                        <label class="form-label">最大值</label>
                        <input type="number" name="max_value" class="form-control"
                               value="{{ max_value }}" placeholder="最大值" step="0.01">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="bi bi-search"></i> 查询
                </button>
                <a href="{{ url_for('admin_cards') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-counterclockwise"></i> 重置
                </a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">银行卡列表</h5>
        <span class="text-muted">共 {{ cards|length }} 张银行卡</span>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>卡号</th>
                        <th>客户姓名</th>
                        <th>存款类型</th>
                        <th>余额</th>
                        <th>状态</th>
                        <th class="text-end">操作</th>
                    </tr>
                </thead>

                <tbody>
                    {% if not cards and request.args.get('search_type') %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">没有找到符合条件的银行卡记录</td>
                    </tr>
                    {% elif not cards %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">暂无银行卡记录</td>
                    </tr>
                    {% endif %}

                    {% for card in cards %}
                    <tr>
                        <td class="fw-bold">{{ card.cardID[:4] }} {{ card.cardID[4:8] }} {{ card.cardID[8:12] }} {{ card.cardID[12:] }}</td>
                        <td>{{ card.customerName }}</td>
                        <td>{{ card.savingName }}</td>
                        <td>¥{{ "%.2f"|format(card.balance) }}</td>
                        <td>
                            {% if card.IsReportLoss == '是' %}
                            <span class="badge bg-danger rounded-pill">已挂失</span>
                            {% else %}
                            <span class="badge bg-success rounded-pill">正常</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ url_for('admin_edit_card', card_id=card.cardID) }}"
                                   class="btn btn-outline-primary"
                                   data-bs-toggle="tooltip" title="编辑">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                {% if card.IsReportLoss == '是' %}
                                    <a href="{{ url_for('admin_unlock_card', card_id=card.cardID) }}"
                                       class="btn btn-outline-success"
                                       data-bs-toggle="tooltip" title="解挂"
                                       onclick="return confirm('确定要解挂这张银行卡吗？')">
                                        <i class="bi bi-unlock"></i>
                                    </a>
                                {% endif %}
                                <a href="{{ url_for('admin_delete_card', card_id=card.cardID) }}"
                                   class="btn btn-outline-danger"
                                   data-bs-toggle="tooltip" title="删除"
                                   onclick="return confirm('确定删除卡号 {{ card.cardID }} 吗？此操作不可撤销！')">
                                    <i class="bi bi-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
// 根据查询类型显示不同的输入框
document.querySelector('[name="search_type"]').addEventListener('change', function() {
    const searchType = this.value;
    const searchValueContainer = document.getElementById('searchValueContainer');
    const rangeContainer = document.getElementById('rangeContainer');

    if (searchType === 'range') {
        searchValueContainer.classList.add('d-none');
        rangeContainer.classList.remove('d-none');
    } else {
        searchValueContainer.classList.remove('d-none');
        rangeContainer.classList.add('d-none');
    }
});

// 初始化显示状态
document.addEventListener('DOMContentLoaded', function() {
    const searchType = '{{ search_type }}';
    if (searchType === 'range') {
        document.getElementById('searchValueContainer').classList.add('d-none');
        document.getElementById('rangeContainer').classList.remove('d-none');
    }

    // 初始化工具提示
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
{% endblock %}

{% endblock %}